<template>
  <div id="group-learning">
    <Structure>
      <template v-slot:img>
        <img src alt />
      </template>

      <template v-slot:breadcrumb>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>团学工作</el-breadcrumb-item>
          <el-breadcrumb-item>{{ activeName }}</el-breadcrumb-item>
        </el-breadcrumb>
      </template>

      <template v-slot:bar>
        <div class="title">团学工作</div>
        <ul class="bar">
          <li
            class="bar-item"
            @click="changeActiveIndex(index)"
            v-for="(item, index) in barList"
            :class="{ 'active': activeIndex === index }"
          >{{ item.text }}</li>
        </ul>
        <div class="title">热点资讯</div>
        <ul class="news">
          <li class="news-item" v-for="(item, index) in newsList" :key="index">
            <p class="text">{{ item.text }}</p>
            <time class="date">{{ item.date }}</time>
          </li>
        </ul>
      </template>

      <template v-slot:right_centent>
        <nuxt-child />
      </template>
    </Structure>
  </div>
</template>

<script>
import Structure from "~/components/Structure";
export default {
  name: "group-learning",
  layout: "index",
  data() {
    return {
      activeIndex: 0,
      activeName: "团委学生会",
      barList: [
        { path: "/group-learning", text: "团委学生会" },
        { path: "/group-learning/page2", text: "班级建设" },
        { path: "/group-learning/page3", text: "计算机协会" }
      ],
      newsList: [
        {
          text:
            "计算机科学与哦工程学院开展2018届学生毕业设计工作撒打发手动阀手动阀撒旦发射点发射点发生",
          date: "2019-1-2"
        },
        {
          text:
            "计算机科学与哦工程学院开展2018届学生毕业设计工作撒打发手动阀手动阀撒旦发射点发射点发生",
          date: "2019-1-2"
        },
        {
          text:
            "计算机科学与哦工程学院开展2018届学生毕业设计工作撒打发手动阀手动阀撒旦发射点发射点发生",
          date: "2019-1-2"
        },
        {
          text:
            "计算机科学与哦工程学院开展2018届学生毕业设计工作撒打发手动阀手动阀撒旦发射点发射点发生",
          date: "2019-1-2"
        },
        {
          text:
            "计算机科学与哦工程学院开展2018届学生毕业设计工作撒打发手动阀手动阀撒旦发射点发射点发生",
          date: "2019-1-2"
        }
      ]
    };
  },
  components: {
    Structure
  },
  methods: {
    changeActiveIndex(index) {
      this.activeIndex = index;
      this.activeName = this.barList[index].text;
      this.$router.push(this.barList[index].path);
    }
  }
};
</script>

<style scoped lang="less">
.bar {
  margin-top: 20px;
  .bar-item {
    padding: 5px 0 5px 20px;
    margin-bottom: 25px;
    font-size: 18px;
    cursor: pointer;
    &.active {
      background: linear-gradient(to right, #f3cf36, #fff);
    }
  }
}

.news {
  .news-item {
    padding: 20px 0;
    margin: 0 20px;
    cursor: pointer;
    line-height: 25px;
    height: 150px;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(180, 175, 175);
    .text {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3; //需要控制的文本行数
      overflow: hidden;
      margin-top: 0;
    }
    .date {
      color: rgb(180, 175, 175);
    }
  }
}
</style>